<template>
    <div class="pt10 pb44">
        <div v-for="(videoItem, index) in videoList" :key="index">
            <div class="disflex jsbet bgfff pl15 pr15 h49">
                <div class="fs16 fbold w100 textl h49 lh49">视频名称</div>
                <div class="pl15 pha8 fs14 lh49 h49 w100p c38 textr">{{videoItem.describes}}</div>
            </div>
            <div class="bgfff textc h49 lh49 fs16 cblue btf5f6 bbf5f6" @click="toEditVideo(videoItem)">替换视频内容</div>
            <div class="bgfff textc borderbox h212 overhidden">
                <video :id="'myVideo' + index" class="w100p h212"
                    :title="videoItem.describes"
                    objectFit="cover"
                    :src="videoItem.url"
                    :poster="videoItem.cover"
                    enable-danmu
                    danmu-btn
                    controls
                    :autoplay="false">
                </video>
            </div>
            <div class="disflex jsbet bffff mt20 pb20 pl15 pr15 h30 overhidden">
                <div class="w30 h30">
                    <img @click="deleteVideo(videoItem, index)" src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/editor_del_2.png" alt="" class="w30 h30">
                </div>
                <div class="w70 h30 disflex jsbet">
                    <img @click="moveVideo(videoItem, index, '1')" src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/editor_up.png" alt="" class="w30 h30">
                    <img @click="moveVideo(videoItem, index, '2')" src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/editor_down.png" alt="" class="w30 h30">
                </div>
            </div>
        </div>
        <BottomButtonSmall v-if="videoList.length < 6" :text="'新增视频'" :url="'save'" @btn_tap="btn_tap"></BottomButtonSmall>
    </div>
</template>
<script>
import WXAJAX from '@/utils/request'
import BottomButtonSmall from '@/components/bottom_button_small' //
export default {
    components: { BottomButtonSmall },
    data(){
        return{
            videoList: []
        }
    },
    onShow(){
        this.init();
    },
    mounted() {
    },
    methods: {
        init(){
            wx.setNavigationBarTitle({
                title: '企业视频'
            });
            this.getCompanyVideosList();
        },
        getCompanyVideosList(){
            this.videoItem = [];
            let v = this;
            let params = {
                companyId: 6
            };
            wx.showLoading();
            WXAJAX.POST(params , '', '/company/selectWebsiteInfo').then((data) => {
                wx.hideLoading();
                if (data) {
                    v.videoList = data.companyVideoModelList;
                } else {
                   
                }
            })
            .catch((err) => {
                wx.hideLoading();
            });
        },
        toEditVideo(videoItem){
            wx.setStorageSync('videoItem', videoItem);
            wx.navigateTo({
                url: '../editCompanyVideo/main?type=edit'
            })
        },
        btn_tap(){
            wx.navigateTo({
                url: '../editCompanyVideo/main?type=create'
            })
        },
        deleteVideo(videoItem, index){
            let v = this;
            let params = {
                videoId: videoItem.videoId
            }
            wx.showLoading();
            WXAJAX.POST(params , '', '/company/delCompanyVideo').then((data) => {
                wx.hideLoading();
                if (data) {
                    wx.showToast({
                        title: '删除成功',
                        duration: 2000,
                        icon: 'none'
                    });
                    v.videoList.splice(index, 1);
                } else {
                   
                }
            })
            .catch((err) => {
                wx.hideLoading();
            });
        },
        moveVideo(videoItem, index, type){
            // console.log(videoItem, index, this.videoList.length - 1, type)
            // if (index === 0 && type === '1') {
            //     wx.showToast({
            //         title: '该视频已处于第一条',
            //         duration: 2000,
            //         icon: 'none'
            //     });
            // }
            // if (index === this.videoList.length - 1 && type === '2') {
            //     wx.showToast({
            //         title: '该视频已处于最后一条',
            //         duration: 2000,
            //         icon: 'none'
            //     });
            // }
            let v = this;
            let params = {
                videoId: videoItem.videoId,
                type: type
            };
            wx.showLoading();
            WXAJAX.POST(params , '', '/company/moveCompanyVideo').then((data) => {
                wx.hideLoading();
                if (data) {
                    wx.showToast({
                        title: '移动成功',
                        duration: 2000,
                        icon: 'none'
                    });
                    // let videoList = v.videoList;
                    // let video = videoList[index];
                    // if (type == 1) {
                    //     videoList[index] = videoList[index - 1];
                    //     videoList[index - 1] = video;
                    // } else {
                    //     videoList[index] = videoList[index + 1];
                    //     videoList[index + 1] = video;
                    // }
                    // // v.videoList = videoList;
                    // v.$set('videoList', videoList)
                    v.videoList = []; // 苹果手机移动视频之后会转圈，先置空，再请求接口重新赋值，可以避免。有点粗暴，后续找其他解决方案；
                    v.getCompanyVideosList();
                } else {
                   
                }
            })
            .catch((err) => {
                wx.hideLoading();
            });
        }
    }
}
</script>
<style>
    page{
        background: #F5F5F6;
    }
</style>
